<template>
  <!-- 以下格式为 AGGrid 默认菜单格式 -->
  <div>
    <span class="ag-menu-option-part ag-menu-option-icon" role="presentation"></span>
    <span class="ag-menu-option-part ag-menu-option-text">{{ props.params.text ?? props.params.name }}</span>
    <span class="ag-menu-option-part ag-menu-option-shortcut">
      <ElButton @click="onClick()">{{ props.params.buttonValue }}</ElButton>
    </span>
    <span class="ag-menu-option-part ag-menu-option-popup-pointer">
      <span v-if="params.subMenu" class="ag-icon ag-icon-small-right" unselectable="on" role="presentation"></span>
    </span>
  </div>
</template>

<script setup lang='ts'>
import type { MenuItemDef } from 'ag-grid-enterprise';

const props = defineProps<{
  params: MenuItemDef<object, string> & { text: string, buttonValue: string }
}>()

const configureDefaults = () => {
  return true;
};

const onClick = () => {
  console.log(`${props.params.name} clicked`);
};

defineExpose({
  configureDefaults,
  onclick
})
</script>

<style scoped></style>
